<!-- 验收清单 -->
<template>
  <el-card shadow="never">
    <el-form :model="searchForm" label-width="auto" :inline="true">
      <el-row>
        <el-col :span="6">
          <el-form-item label="订单编号" style="width: 85%">
            <el-input
              v-model="searchForm.orderSn"
              placeholder="请输入 订单编号"
              class="!w-[240px]"
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="订单名称" style="width: 85%">
            <el-input
              v-model="searchForm.orderName"
              placeholder="请输入 订单名称"
              class="!w-[240px]"
              size="small"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="合同名称" style="width: 85%">
            <el-select
              v-model="searchForm.contractName"
              clearable
              filterable
              remote
              remote-show-suffix
              placeholder="请选择 合同名称"
              :remote-method="getContractNameList"
              size="small"
            >
              <el-option
                v-for="item in contractOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="项目名称" style="width: 85%">
            <el-select
              v-model="searchForm.projectName"
              clearable
              filterable
              remote
              remote-show-suffix
              placeholder="请选择 项目名称"
              :remote-method="getProjectNameList"
              size="small"
            >
              <el-option
                v-for="item in projectOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                class="!w-[500px]"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="text-align: right">
        <el-col :span="24" style="text-align: right">
          <!-- <el-button color="#1E3485" size="small" :icon="Refresh"
            >生成对账</el-button
          > -->
          <el-button
            color="#1E3485"
            size="small"
            icon="Download"
            @click="getlist('', true)"
          >导出</el-button
          >
          <el-button
            color="#1E3485"
            size="small"
            :icon="Search"
            @click="
              tablePage.currentPage = 1;
              getlist('1');
            "
            >搜索</el-button
          >
          <el-button
            type="default"
            size="small"
            :icon="Delete"
            @click="clearAllFields"
            >清空</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <vxe-table
      border
      min-height="300"
      header-align="center"
      :column-config="{ resizable: true }"
      :row-config="{ isHover: true }"
      :checkbox-config="checkboxConfig"
      :data="TableData"
      size="mini"
      style="margin-top: 1%"
    >
      <vxe-column
        type="seq"
        fixed="left"
        title="序号"
        width="50"
        align="center"
      />
      <vxe-column
        field="orderSn"
        title="订单编号"
        min-width="200"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
      <vxe-column
        field="orderName"
        title="订单名称"
        min-width="200"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
      <vxe-column
        field="contractName"
        title="合同名称"
        min-width="200"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
      <vxe-column
        field="projectName"
        title="项目名称"
        min-width="200"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
      <vxe-column
        field="createdAt"
        title="订单发起时间"
        min-width="120"
        align="center"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
      <vxe-column
        field="supplyTime"
        title="供货时间"
        min-width="120"
        align="center"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
      <vxe-column
        field="shipmentFiles"
        title="供货凭证"
        min-width="200"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
      <vxe-column
        field="taxTotalPrice"
        title="供货含税总金额(元)"
        min-width="150"
        align="right"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
      <vxe-column
        field="reconciliationStatus"
        title="对账"
        min-width="120"
        align="center"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
      <vxe-column
        field="supplyStatus"
        title="状态"
        min-width="120"
        align="center"
        show-header-overflow
        show-overflow="title"
        show-footer-overflow
      />
      <vxe-column title="操作" fixed="right" min-width="200" align="center">
        <!-- 操作列按钮 -->
        <template v-slot="{ row }">
          <vxe-button
            v-if="row.supplyStatus == '待项目验收'"
            mode="text"
            @click="
              toDetail(
                {
                  id: row.id,
                  title: '',
                  action: 'YSAcceptanceForm'
                },
                'YSAcceptanceForm'
              )
            "
            >验收</vxe-button
          >
          <!-- <vxe-button
              v-if="row.supplyStatus == '待云采确认'"
              mode="text"
              @click="
                toDetail(
                  {
                    id: row.id,
                    title: '',
                    action: 'YCQRAcceptanceForm'
                  },
                  'YCQRAcceptanceForm'
                )
              "
              >云采确认</vxe-button
            > -->
          <vxe-button
            mode="text"
            @click="
              toDetail(
                {
                  id: row.id,
                  title: '',
                  action: 'view'
                },
                'viewAcceptanceForm'
              )
            "
            >查看</vxe-button
          >
        </template>
      </vxe-column>
    </vxe-table>
    <vxe-pager
      v-model:current-page="tablePage.currentPage"
      v-model:page-size="tablePage.pageSize"
      :layouts="[
        'Sizes',
        'PrevJump',
        'PrevPage',
        'Number',
        'NextPage',
        'NextJump',
        'FullJump',
        'Total'
      ]"
      :total="tablePage.total"
      size="small"
      @page-change="handlePageChange"
    />
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { Delete, Search, Edit, Refresh } from "@element-plus/icons-vue";
import { VxePagerEvents } from "vxe-table";
import { useRouter, useRoute } from "vue-router";
import { getposupplylist } from "@/api/ERP_OrderManage";

import { useDetail } from "./components/utils/hooks";

import { getProjectList } from "@/api/ERP_public";
import { getProcureContractsList } from "@/api/ERP_procure";
import {http} from "@/utils/http";
import {baseUrlApi} from "@/store/utils";

// 路由跳转
const route = useRoute();
const { toDetail, router } = useDetail();

onMounted(async () => {
  // getDZZT();
  // getDDZT();
  // getKPZT();
  if (route.query.title) {
    let stringValue: string = route.query.title as string;
  }
  getlist();
});

// 表单字段
const searchForm = reactive({
  orderSn: "", // 订单编号
  orderName: "", // 订单名称
  projectName: "", //项目名称
  contractName: "" //合同名称
});

//字典
const Options = reactive([]);

// 表格数据
const TableData = ref([]);

// 表格分页配置
const tablePage = reactive({
  total: 0,
  currentPage: 1,
  pageSize: 10
});

// 获取验收清单列表
const getlist = async(query?: string, isExport?) => {

  if (route.query.id) {
    let params: any = {};
    params.pageIndex = tablePage.currentPage;
    params.pageSize = tablePage.pageSize;
    params.applyId = route.query.id;
    // params.orderName = route.query.title;
    params.orderSn = searchForm.orderSn;
    params.projectName = searchForm.projectName;
    params.contractName = searchForm.contractName;
    params.contractMethod = 1

    if(isExport) {
      await http.request('get',baseUrlApi("sosupply/export/file"), {params})
      return
    }
    if (query === "1") {
      tablePage.currentPage = 1;
    }
    getposupplylist(params).then((response: any) => {
      response.data.records.forEach(res => {
        // 文件名称
        if (res.shipmentFiles) {
          const jsonObject = JSON.parse(res.shipmentFiles);
          jsonObject.forEach(item => {
            res.shipmentFiles = item.name;
          });
        }
        //订单发起时间
        if (res.createdAt) {
          const date = new Date(res.createdAt);
          res.createdAt =
            date.getFullYear() +
            "-" +
            (date.getMonth() + 1) +
            "-" +
            date.getDate();
        }
        //供货时间
        if (res.shipmentAt) {
          const date = new Date(res.shipmentAt);
          res.shipmentAt =
            date.getFullYear() +
            "-" +
            (date.getMonth() + 1) +
            "-" +
            date.getDate();
        }
        //对账状态
        if (res.reconciliationStatus == "0") {
          res.reconciliationStatus = "待对账";
        } else if (res.reconciliationStatus == "1") {
          res.reconciliationStatus = "对账中";
        } else if (res.reconciliationStatus == "2") {
          res.reconciliationStatus = "对账完成";
        }
        //状态
        if (res.supplyStatus == "0") {
          res.supplyStatus = "供货清单未提交";
        } else if (res.supplyStatus == "1") {
          res.supplyStatus = "待上传送货单";
        } else if (res.supplyStatus == "2") {
          res.supplyStatus = "撤回";
        } else if (res.supplyStatus == "3") {
          res.supplyStatus = "云采确认驳回";
        } else if (res.supplyStatus == "4") {
          res.supplyStatus = "待项目验收";
        } else if (res.supplyStatus == "5") {
          res.supplyStatus = "项目验收完成";
        } else if (res.supplyStatus == "6") {
          res.supplyStatus = "待云采确认";
        }
      });
      TableData.value = response.data.records;
      tablePage.total = response.data.totalElements;
    });
  } else {
    let params: any = {};
    params.pageIndex = tablePage.currentPage;
    params.pageSize = tablePage.pageSize;
    params.orderSn = searchForm.orderSn;
    params.orderName = searchForm.orderName;
    params.projectName = searchForm.projectName;
    params.contractName = searchForm.contractName;
    params.contractMethod = 1
    if(isExport) {
      await http.request('get',baseUrlApi("sosupply/export/file"), {params})
      return
    }
    if (query === "1") {
      tablePage.currentPage = 1;
    }
    getposupplylist(params).then((response: any) => {
      response.data.records.forEach(res => {
        // 文件名称
        if (res.shipmentFiles) {
          const jsonObject = JSON.parse(res.shipmentFiles);
          jsonObject.forEach(item => {
            res.shipmentFiles = item.name;
          });
        }
        //订单发起时间
        if (res.createdAt) {
          const date = new Date(res.createdAt);
          res.createdAt =
            date.getFullYear() +
            "-" +
            (date.getMonth() + 1) +
            "-" +
            date.getDate();
        }
        //供货时间
        if (res.shipmentAt) {
          const date = new Date(res.shipmentAt);
          res.shipmentAt =
            date.getFullYear() +
            "-" +
            (date.getMonth() + 1) +
            "-" +
            date.getDate();
        }
        //对账状态
        if (res.reconciliationStatus == "0") {
          res.reconciliationStatus = "待对账";
        } else if (res.reconciliationStatus == "1") {
          res.reconciliationStatus = "对账中";
        } else if (res.reconciliationStatus == "2") {
          res.reconciliationStatus = "对账完成";
        }
        //状态
        if (res.supplyStatus == "0") {
          res.supplyStatus = "供货清单未提交";
        } else if (res.supplyStatus == "1") {
          res.supplyStatus = "待上传送货单";
        } else if (res.supplyStatus == "2") {
          res.supplyStatus = "撤回";
        } else if (res.supplyStatus == "3") {
          res.supplyStatus = "云采确认驳回";
        } else if (res.supplyStatus == "4") {
          res.supplyStatus = "待项目验收";
        } else if (res.supplyStatus == "5") {
          res.supplyStatus = "项目验收完成";
        } else if (res.supplyStatus == "6") {
          res.supplyStatus = "待云采确认";
        }
      });
      TableData.value = response.data.records;
      tablePage.total = response.data.totalElements;
    });
    if (query) {
      setTimeout(() => {
        getposupplylist;
      }, 1500);
    }
  }
};

// 清空按钮点击事件
const clearAllFields = () => {
  if (!route.query.title) {
    // 重置SearchForm对象的所有属性
    for (const key in searchForm) {
      if (searchForm.hasOwnProperty(key)) {
        if (key === "signDate") {
          // searchForm[key] = [];
          searchForm[key] = null;
        } else {
          searchForm[key] = "";
        }
      }
    }
  }
};

//多选禁用
const checkboxConfig = reactive({
  //labelField: "name",
  checkMethod: ({ row }) => {
    return false;
  }
});

// 表格分页事件
const handlePageChange: VxePagerEvents.PageChange = ({
  currentPage,
  pageSize
}) => {
  tablePage.currentPage = currentPage;
  tablePage.pageSize = pageSize;
  getlist();
};

// 项目名称选择
let projectOptions = ref([]);
// 项目名称列表下拉框
const getProjectNameList = (query: string) => {
  getProjectList({
    pageIndex: 1,
    pageSize: 10,
    projectName: query,
    contractMethod:1
  }).then(response => {
    projectOptions.value = (response as any).data.records.map(item => ({
      label: item.projectName,
      value: item.projectName
    }));
  });
  if (query) {
    setTimeout(() => {
      getProjectList;
    }, 1500);
  }
};
// 合同名称选择
let contractOptions = ref([]);
// 合同名称列表下拉框
const getContractNameList = (query: string) => {
  getProcureContractsList({
    pageIndex: 1,
    pageSize: 10,
    contractType: "0",
    contractName: query
  }).then(response => {
    contractOptions.value = (response as any).data.records.map(item => ({
      label: item.contractName,
      value: item.contractName
    }));
  });
  if (query) {
    setTimeout(() => {
      getProcureContractsList;
    }, 1500);
  }
};
</script>

<style lang="scss" scoped></style>
